import vuex from 'vuex'
import vue from 'vue'

vue.use(vuex);
const store = new vuex.Store({
    state: {
        // ageNum: 0,
        // childNum: 0,
        // accountNum: 0,
        showForm: false,
        // vaccinationsNum: 0,
        tableData: [{
            id: 1,
            name: '苏落',
            age: 19,
            child: '独生子女',//是否独生
            account: '农村户口',//户口
            phone: 17752750628,//手机号码
            identity: '431022200022229292',//身份证号码
            address: '上海市路 1518 弄',//地址
            vaccinations: '未接种',//是否接种新冠疫苗
        },
        {
            id: 2,
            name: '青山',
            age: 19,
            child: '独生子女',//是否独生
            account: '城市户口',//户口
            phone: 17752750628,//手机号码
            identity: '431022200022229292',//身份证号码
            address: '上海市路 1518 弄',//地址
            vaccinations: '已接种',//是否接种新冠疫苗
        },],
    },

    //state里面的数据只能通过mutations修改
    //mutations里面的方法 需要在组件里面 通过this.$store.commit('changeNum',1)调用
    //this.$store.commit()函数需要两个参数  第一个就是 调用的方法名 第二个 就是	传给方法的参数
    mutations: {
        changeNum(state, arg) {
            //state 代表  store里面的 state 本身   arg  就是 commit传入的第二个参数
            console.log('触发了 mutations里面的changeNum', state, arg);
            state.num += arg
        },
        showForm(state, arg) {
            state.showForm = arg
        },
        addForm(state, arg) {
            // let bool = this.tableData.indexOf(item => item.name === arg.name) >= 0
            // bool >= 0 ? alert('学生信息已存在') : state.tableData.push(arg)
            state.tableData.push(arg)

        }
    },
    //actions里面的方法 需要在组件里面 通过this.$store.dispatch('changeNum',1)调用
    //this.$store.dispatch()函数需要两个参数  第一个就是 调用的方法名 第二个 就是传入的数据
    actions: {
        changeNum(inStore, arg) {
            //inStore 代表  store 本身   arg  就是 dispatch传入的第二个参数
            setTimeout(() => {
                console.log(inStore, arg);
                inStore.commit('changeNum', arg)
            }, 2000)
        }
    },
    //从里面可以得到 state里面的数据 计算过后的结果
    getters: {
        childNum(state) {
            // console.log('计算：', state.childNum.map(item => item.child === "独生子女").length);
            return state.tableData.reduce((acc, cur) => {
                if (cur.child === "独生子女") {
                    acc++;
                }
                return acc;
            }, 0)
        },
        accountNum(state) {
            // console.log('计算：', state.childNum.map(item => item.child === "独生子女").length);
            return state.tableData.reduce((acc, cur) => {
                if (cur.account === "城市户口") {
                    acc++;
                }
                return acc;
            }, 0)
        }, ageNum(state) {
            // console.log('计算：', state.childNum.map(item => item.child === "独生子女").length);
            return state.tableData.reduce((acc, cur) => {
                if (cur.age >= 18) {
                    acc++;
                }
                return acc;
            }, 0)
        }, vaccinationsNum(state) {
            // console.log('计算：', state.childNum.map(item => item.child === "独生子女").length);
            return state.tableData.reduce((acc, cur) => {
                if (cur.vaccinations === "已接种") {
                    acc++;
                }
                return acc;
            }, 0)
        },
    },
    //子store的挂载位置
    modules: {

    }
})


export default store